Application for Visualizing and Comparing Heatmap Data
This web app was designed to assist with the comparison of spatial daylight data. Two data sources ("Solution A" and "Solution B") are input and heatmap visualizations are generated. The data in this tool consists of illuminance values collected over a rectangular area such as a room. A delta heatmap shows the differences between the two spaces and interactive statistical plots are shown below.
Each heatmap has a synchronized "brush" that allows users to select rows, columns, and rectangular areas by dragging over the data cells. Making a selection on one heatmap causes the same selection to activate on the other one – allowing users to focus on specific regions of data. The delta heatmap is also synchronized for consistency.
A histogram and box plot of the data values are generated for each input data set at the bottom.
Histogram Interaction
Hovering over bars of the histogram highlights the corresponding data points in the original heatmap, revealing a correlation between spatial and numerical data.
Box Plot Interaction
A similar interaction is afforded by the box plots, this time separated by quadrants of the ordered data.
This application was built using d3.js for the visualization course, CS 294-10, at UC Berkeley during the Fall 2014 semester.
